<template>
    <view class="container">
        <view class="corporate-info">
            <image class="corporate-logo" src="@/static/logo.png"></image>
            <view class="corporate-title">智慧梁场</view>
        </view>
        <u--form labelPosition="left" :model="formData" :rules="rules" ref="uForm">
            <u-form-item label="账号" prop="account" borderBottom>
                <u--input v-model="formData.account" clearable :placeholder="'请输入账号'" border="none"></u--input>
            </u-form-item>
            <u-form-item label="密码" prop="password" borderBottom>
                <u--input v-model="formData.password" clearable type="password" :placeholder="'请输入密码'" border="none"></u--input>
            </u-form-item>
        </u--form>
        <u-button @click="submit">登录</u-button>
    </view>
</template>

<script>
import { mapState, mapGetters } from 'vuex';
import { loginApi } from '@/api/user.js';
export default {
    data() {
        return {
            formData: {
                account: '',
                password: ''
            },
            rules: {
                account: {
                    type: 'string',
                    required: true,
                    message: '请填写账号',
                    trigger: ['blur']
                },
                password: {
                    type: 'string',
                    required: true,
                    message: '请填写密码',
                    trigger: ['blur']
                }
            }
        };
    },
    computed: {
        ...mapGetters(['token'])
    },
    methods: {
        submit() {
            const thisObj = this;
            this.$refs.uForm
                .validate()
                .then((res) => {
                    thisObj.$store
                        .dispatch('user/accountLogin', thisObj.formData)
                        .then((res) => {
                            this.$Router.push({
                                name: 'home'
                            });
                        })
                        .catch((error) => {});
                })
                .catch((error) => {
                    uni.$u.toast('校验失败');
                });
        }
    }
};
</script>

<style lang="scss" scoped>
.container {
    .corporate-info {
        text-align: center;
        .corporate-logo {
            width: 150rpx;
            height: 150rpx;
        }
    }
}
</style>
